<template>
	<div>
		<div class="loan_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>房贷担保费计算器</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div>
			<swiper :list="imgList" :show-dots="false" loop auto :aspect-ratio="0.3" dots-position="center" dots-class="custom-bottom"></swiper>
		</div>
		<div class="guarantee_result">
			<ul>
				<li>
					<p>
						单价
					</p>
				</li>
				<li>
					<input v-model="a" type="tel" placeholder="请输入单价">
				</li>
				<li>
					<p>元/平方米</p>
				</li>
			</ul>
			<ul>
				<li>
					<p>
						面积
					</p>
				</li>
				<li>
					<input v-model="b" type="tel" placeholder="请输入面积">
				</li>
				<li>
					<p>平方米</p>
				</li>
			</ul>
		</div>
		<div class="business_btn">
			<ul>
				<li>
					<input @click="showResult=true" type="button" class="Calculation" value="开始计算">
				</li>
				<li>
					<input @click="reset" type="button" class="Reset" value="重置">
				</li>
			</ul>
		</div>
		<div class="guarantee_title">
			<ul>
				<li>
					<p>计算结果:</p>
				</li>
				<li>
					<p>提示</p>
				</li>
				<li @click="showDialogStyle = true">
					<i class="iconfont col_9">&#xe618;</i>
				</li>
			</ul>
		</div>
		<div class="business_result">
			<ul>
				<li>
					<p>
						房屋总价
					</p>
				</li>
				<li>
					<input :value="showResult ? total : 0" type="text" placeholder="0" readonly>
				</li>
				<li>
					<p>元</p>
				</li>
			</ul>
			<ul>
				<li>
					<p>
						印花税
					</p>
				</li>
				<li>
					<input :value="showResult ? stampDuty : 0" type="text" placeholder="请输入印花税" readonly>
				</li>
				<li>
					<p>元</p>
				</li>
			</ul>
			<ul>
				<li>
					<p>
						公证费
					</p>
				</li>
				<li>
					<input :value="showResult ? fee : 0" type="text" placeholder="请输入公证费" readonly>
				</li>
				<li>
					<p>元</p>
				</li>
			</ul>
			<ul>
				<li>
					<p>
						契税
					</p>
				</li>
				<li>
					<input :value="showResult ? deedTax : 0" type="text" placeholder="请输入契税" readonly>
				</li>
				<li>
					<p>元</p>
				</li>
			</ul>
			<ul>
				<li>
					<p>
						委托办理产权手续费
					</p>
				</li>
				<li>
					<input :value="showResult ? fee : 0" type="text" placeholder="请输入产权手续费" readonly>
				</li>
				<li>
					<p>元</p>
				</li>
			</ul>
			<ul>
				<li>
					<p>
						房屋买卖手续费
					</p>
				</li>
				<li>
					<input :value="showResult ? buyFee : 0" type="text" placeholder="请输入房屋买卖手续费" readonly>
				</li>
				<li>
					<p>元</p>
				</li>
			</ul>
		</div>
		<div v-transfer-dom>
			<x-dialog v-model="showDialogStyle" hide-on-blur>
				<div class="tip_text1">
					<p>提示：</p>
					<p>购房需交纳的第一组税费是契税、印花税、交易手续费、权属登记费。</p>
					<p>契税</p>
					<p>默认按房价3%计算。实际税费根据房屋面积、房主拥有房屋套数的不同，税率有所不同。</p>
					<p>印花税</p>
					<p>金额为房价的0.05%，在交易签证时交纳。</p>
					<p>交易手续费</p>
					<p>一般是每平方2.5元，也在交易签证时交纳。</p>
				</div>
			</x-dialog>
		</div>
	</div>
</template>

<script>
import { XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
	directives: {
		TransferDom
	},
	components: {
		XDialog
	},
	data() {
		return {
			showDialogStyle: false,
			a: null,
			b: null,
			showResult: false,

			imgList: []
		}
	},
	computed: {
		total() {
			return (this.a * this.b).toFixed(2)
		},
		stampDuty() {
			return (this.a * this.b * 0.0005).toFixed(2)
		},
		fee() {
			return (this.a * this.b * 0.003).toFixed(2)
		},
		deedTax() {
			return (this.a * this.b * 0.03).toFixed(2)
		},
		buyFee() {
			return (this.b * 2.5).toFixed(2)
		}
	},
	created() {
		this.queryImg()
	},
	methods: {
		reset() {
			this.a = this.b = null
			this.showResult = false
		},

		queryImg() {
			this.$http.get('/app/index/carousel', {
				params: { page: 'guarantee' }
			}).then(json => {
				const { code, carousel } = json
				if (code === 0) {
					carousel.forEach(n => {
						this.imgList.push({
							url: n.url,
							img: n.imgPath
						})
					})
				}
			})
		}
	}
}
</script>
<style>
.weui-dialog{
	width: 89%;
    max-width: 339px;
}
</style>
